<template>
    <el-row>
        <!--  搜索操作区 -->
        <el-row class="pb10  little-header">
            <el-col  :md='18' :lg='16'  align='left'>
            		<!-- <el-select v-model="search.huiyuan_value" placeholder="请选择" class='w140'>
    							    <el-option
    							      v-for="item in huiyuan"
    							      :key="item.value"
    							      :label="item.label"
    							      :value="item.value">
    							    </el-option>
    						</el-select>
    						<el-select v-model="search.company_state" placeholder="请选择" class='w140'>
    							    <el-option
    							      v-for="item in company_state"
    							      :key="item.value"
    							      :label="item.label"
    							      :value="item.value">
    							    </el-option>
    						</el-select> -->
                <el-col  :xs='12'  :sm='8'  :md='8' :lg='8'>
                    <el-input  placeholder='请输入企业名称/创建人' v-model.trim='search.name'  @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                </el-col>
                <el-col  :xs='4'  :sm='4'  :lg='2'>
                    <el-button icon="el-icon-search" type='primary' @click='pageInit(1)' class='ml10' >搜索</el-button>
                </el-col>
            </el-col>
            <el-col :md='{span:3,offset:1}' :lg='{span:4,offset:3}'  >  
                <div align="right">
                    <router-link to='/company/addNew'  v-if='permit.add'><el-button type="primary" icon="el-icon-plus" size="small" round  >新增</el-button></router-link>
                </div>
            </el-col>
        </el-row>
        <!-- table -->
        <el-table border  :data="tableList"   :cell-class-name='hover'  @cell-click='checkUser'>
            <el-table-column prop="entName"            label="企业名称"     align="center"></el-table-column>
            <el-table-column prop="issuedProjectNum"     label="发行项目"     align="center"></el-table-column>
            <el-table-column prop="guaranteeProjectNum"            label="担保项目"     align="center"></el-table-column>
            <el-table-column prop="entMemberType"            label="会员类型"     align="center">
                <template slot-scope="scope">
                    {{scope.row.entMemberType | entMember}}
                </template>
            </el-table-column>
            <el-table-column prop="modifyTime"      label="更新时间"     align="center">
                <template slot-scope="scope">
                    {{scope.row.modifyTime | formatDate}}
                </template>
            </el-table-column>
            <el-table-column prop="createUserName"  label="创建人"       align="center"></el-table-column>
            <el-table-column                        label="操作"          align="center"  width="250"  v-if='permit.edit  ||  permit.delete'>
                <template v-slot="list">
                    <el-button   v-if='permit.edit'    type="primary" size="mini" round @click="CompanyEdit(list.$index, list.row)">编辑</el-button>
                    <el-button   v-if='permit.delete'  type="warning"  size="mini" round @click="CompanyDelete(list.$index, list.row)">删除</el-button>
                    <!-- 标记删除功能 -->
                    <el-button  v-if='permit.badge_del  && list.row.delMark == 0' type="danger"  size="mini" round @click="CompanyDelete_badge(list.$index, list.row)">撤销</el-button>
                    <el-button  v-if='permit.badge_del  && list.row.delMark == 1' type="danger" plain size="mini" round @click="cancelDelete_badge(list.$index, list.row)">取消删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination class='mt28'
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.currentPage"
                :page-sizes="[10, 20]"
                :page-size="10"
                :pager-count="5"
                
                layout="total, sizes, prev, pager, next, jumper"
                :total="Total">
        </el-pagination>
        <!-- 新增/编辑弹框 -->
        <Edit ref="formEdit" v-on:save-finished="recept()"></Edit>
    </el-row>
</template>

<script>
/*interface*/
import { listCompany ,removeCompany, removeCompany_badge,removeCancel_badge } from '@/api/company/index'
/*components*/
import  Edit  from '@/components/settings/duifuEdit'
/*state*/
import { mapGetters } from 'vuex'
export default {
    name: 'company',
    data () {
        return {
            /*static*/
            /*当前用户允许权限*/
            permit:{
                check:false,
                delete:false,
                add:false,
                edit:false,
                badge_del:false,
                //导出
                export:false,
            },
            //会员类型选项
            huiyuan: [{value: '1',label: '会员类型'}, 
                      {value: '2',label: '交易类会员'}, 
                      {value: '3',label: '服务类会员'}, 
                      {value: '4',label: '经济类会员'}, 
                      {value: '5',label: '承销类会员'}],
            //企业类型选项
            company_state: [{value: '1',label: '企业状态'},
                            {value: '2',label: '暂停合作'},
                            {value: '3',label: '已入会'}, 
                            {value: '4',label: '未入会'},
                            {value: '5',label: '入会审批中'}, 
                            {value: '6',label: '已拒绝入会'}],

            /*active*/
            //查询 /初始化
            search: {
              name: this.Global.ie_nine == true ?'请输入企业名称/创建人':'',/*placeholder 兼容ie9 △*/
              // name:'',
              limit: 10,
              currentPage:1,
            },
            search_place_str:'请输入企业名称/创建人',//placeholder输入内容 placeholder 兼容ie9 △
            Total:null,//表格总页数
            tableList:[],//列表data
        }
    },
    created() {
        this.pageInit()
        this.jurisdiction()//初始化按钮权限操作
    },
    methods:{
        /*初始化 页面 操作权限 S*/
        // 初始化表格数据
        pageInit(num){
            let that =this
            /*placeholder 兼容ie9 △*/
            if(this.search.name == this.search_place_str){
                this.search.name =''
            }
            /*搜索，删除条件进入*/
            if(num == 1){
                this.search.currentPage = 1
            }
            listCompany(this.search).then(response => {
                if(response.data.flag == true){
                    this.Total = response.data.totalRs
                    this.tableList = response.data.dataList
                    /*placeholder 兼容ie9 △*/
                    if(this.search.name == ''){
                        this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
                    }
                }
            })
            // .catch(error => {
            //    console.log(error)
            // })
        },
        //初始化按钮权限操作
        jurisdiction(){
             this.permit.check = this.button_limit.find(item => {
                  return item.id === 10102 
              })
             this.permit.add = this.button_limit.find(item => {
                  return item.id === 10103 
              })
              this.permit.edit = this.button_limit.find(item => {
                  return item.id === 10104 
              })
              this.permit.delete = this.button_limit.find(item => {
                  return item.id === 10105
              })
              this.permit.export = this.button_limit.find(item => {
                return item.id === 10113 
              })
              this.permit.badge_del = this.button_limit.find(item => {
                return item.id === 10114
              })
        },
        /*初始化 页面 操作权限 E*/

        /*列表操作 增删改 S*/
        /*新增*/
        handleCreate(){
            this.$refs.formEdit.$emit('openAddDialog')
        },
        //编辑企业
        CompanyEdit(index,row){
            this.$router.push({path:"/company/edit",query:{code:row.code}})
        },
        //删除
        CompanyDelete(index,row){
            let that=this;
            this.$confirm('确定删除该条数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(async () => {
                  that.$store.commit('showLoading')
                  await removeCompany(row.code)
                    .then(res => {
                        if(res.data.flag == true){
                            this.$message({type:'success',message:res.data.msg})
                            this.pageInit()
                        }
                    })
                    .catch(error => {
                      that.outputError(error)
                    })
                  this.$store.commit('hideLoading')
              })
              .catch(() => {})
        },
        //标记删除
        CompanyDelete_badge(index,row){
            let that=this;
            this.$confirm('标记撤销后，需管理员确认才能删除。期间，您也可取消撤销', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(async () => {
                  that.$store.commit('showLoading')
                  await removeCompany_badge(row.code)
                    .then(res => {
                        if(res.data.flag == true){
                            this.$message({type:'success',message:res.data.msg})
                            this.pageInit(1)
                        }
                    })
                    .catch(error => {
                      that.outputError(error)
                    })
                  this.$store.commit('hideLoading')
              })
              .catch(() => {})
        },
        cancelDelete_badge(index,row){
            let that=this;
            this.$confirm('确定取消删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(async () => {
                  that.$store.commit('showLoading')
                  await removeCancel_badge(row.code)
                    .then(res => {
                        if(res.data.flag == true){
                            this.$message({type:'success',message:res.data.msg})
                            this.pageInit()
                        }
                    })
                    .catch(error => {
                      that.outputError(error)
                    })
                  this.$store.commit('hideLoading')
              })
              .catch(() => {})
        },
        /*列表操作 增删改 E*/

        /*表格操作 列表样式，分页操作 S*/
        /*placeholder 兼容ie9 △*/
        focusinput(e,str){
            if(this.Global.ie_nine == true){
                this.search.name = this.search.name == this.search_place_str ? '':this.search.name
            }
        },
        blurinput(e,str){
            if(this.Global.ie_nine == true){
                let val = e.srcElement.value//ie9下只能用这个值
                this.search.name = val == '' ? this.search_place_str:val
            }
        },
        // 设置表格第一列的特殊样式 该样式需要在APP 或者 public.css设置
        hover({row, column, rowIndex, columnIndex}){
            if(columnIndex == 0  &&  this.permit.check){
                return 'activeCol'
            }
        },
        //点击表格第一列  查看详情
        checkUser(row, column, cell, event){
            if(column.label == '企业名称'  &&  this.permit.check){
                this.$router.push({path:'/company/detail',query:{code:row.code}})
            }
        },
        /*每页显示条数变化 事件触发*/
        handleSizeChange(val) {
            this.search.limit = val;
            /*页数改变，scrolltop*/
            document.querySelector('.el-main').scrollTop = 0
            this.pageInit()
        },
        /*页数变化 事件触发*/
        handleCurrentChange(val) {
            this.search.currentPage = val
            /*页数改变，scrolltop*/
            document.querySelector('.el-main').scrollTop = 0
            this.pageInit()
        },
        /*表格操作 列表样式，分页操作 E*/
    },
    components:{
      Edit
    },
    computed:{
      ...mapGetters(['button_limit'])
    },
}
</script>

<style scoped>

</style>
